<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="<%=basePath%>static/css/validation.css" rel="stylesheet" />
<link href="<%=basePath%>static/css/common_css.css" rel="stylesheet" />
<title>注册 | 票务系统</title>
<link href="<%=basePath%>static/css/reg.css" rel="stylesheet"
	rev="stylesheet" type="text/css" />
<link href="<%=basePath%>static/css/suggest.css" rel="stylesheet" />
<style type="text/css" xml:space="preserve">
.emailist {
	border: 1px solid #bdbdbd;
	border-radius: 4px;
	background-color: #fff;
	color: #666;
	font-size: 14px;
	list-style-type: 0;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

.emailist li {
	padding: 2px 11px;
	cursor: pointer;
}

.emailist .on, .emailist li:hover {
	background-color: #eee;
}
</style>
<link rel="stylesheet" href="<%=basePath%>static/css/jquery-ui.min.css" />
<script type="text/javascript"
	src="<%=basePath%>static/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript"
	src="<%=basePath%>static/js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#birthday").datepicker({
		changeYear: true,
		changeMonth: true,
  		maxDate: 0, 
		yearRange: '1940:2030', 
		dateFormat: 'yy-mm-dd'
	});
	
	$("#cardPhoto").change(function(){
		alert("上传成功!");
		$.ajax({
  			type:"post",
  			url:"<%=basePath%>login/uploadPhoto",
  			enctype:"multipart/form-data",
  			data:new FormData($("#registForm")[0]),
  			processData:false, //data的值是FormData对象，不需要对数据进行处理
  			contentType:false,//FormData对象由form表单构建                                         
  			cache:false,
  			success:function(msg){
  				$("img").attr("src","<%=basePath%>upload/"+msg);
  				$("#xiazai").attr("href","<%=basePath%>login/download?photo="+msg);
  			}
  		});
	});	
});

function register(){
	$("#registForm").submit();
}
</script>
</head>
<body>
<!--header start-->
<div class="header"><div style="z-index: 2000" class="header-bd">
<a href="<%=basePath %>login/index"><h1 class="logo">票务中心</h1>
</a>
<div class="login-info"><div class="phone-link">
</div>
<div class="menu">
</div>
<span class="login-txt" style="color: #666666"><span>意见反馈:12345@163.com
          您好，请</span>
<a id="login_user" href="<%=basePath %>login/toLogin" class="colorA" style="margin-left:-0.5px;">登录</a>
| <a id="regist_out" href="<%=basePath %>login/toRegister">注册</a>
</span>
</div>
<div class="nav"><ul><li><a href="<%=basePath %>login/index">客运首页</a>
</li>
<li id="selectYuding"><a href="<%=basePath %>order/searchTickets">车票预订</a>
</li>

<li><a href="<%=basePath %>ticket/searchTicketsByCon" target="_blank">车次查询</a>
</li>
<li><a href="<%=basePath %>ticket/searchTicketsByCon" target="_blank">票价查询</a>
</li>
<li><a href="<%=basePath %>ticket/searchTicketsByCon" target="_blank">站点查询</a>
</li>
</ul>
</div>
</div>
</div>
	<!--header end-->
	<!--页面主体  开始-->
	<div class="content">
		<!--当前位置 开始-->
		<div class="crumbs">
			您现在的位置：<a
				href="<%=basePath %>login/index"
				shape="rect">客运首页</a> 
				&nbsp;&gt;&nbsp;
				<strong>注册</strong>
		</div>
		<!--当前位置 结束-->
		<form id="registForm" action="<%=basePath %>login/register" method="post" >
			<div class="layout reg">
				<div class="lay-hd">账户信息</div>
				<div class="lay-bd">
					<ul class="reg-list">
						<li>
							<div class="label">
								<span class="required">*</span> 登 录 名：
							</div>
							<div class="r-txt">
								<input type="text" placeholder="用户名设置成功后不可修改"
									class="inptxt w200" name="userId" id="userId"
									maxlength="30" />
							</div>
							<div class="tips">
								<span id="iok_userName" class="tips i-ok"
									style="margin-top: 10px; margin-right: 5px; display: none;"></span>
								6-30位字母、数字或“_”,字母开头
							</div>
						</li>
						<li>
							<div class="label">
								<span class="required">*</span> 用 户 姓 名：
							</div>
							<div class="r-txt">
								<input type="text" placeholder="真实姓名"
									class="inptxt w200" name="userName" id="userName"
									maxlength="30" />
							</div>
							<div class="tips" style="color: #FF7F00;">（用于身份核验，请正确填写）</div>
							</li>
						<li>
							<div class="label">
								<span class="required">*</span> 登录密码：
							</div>
							<div class="r-txt">
								<input placeholder="6-20位字母、数字或符号" 
									class="inptxt w200" name="password" id="password"
									type="password" maxlength="25" />
							</div>
							<div class="tips" style="color: #FF7F00;">请正确填写登录密码</div>
						</li>
						<li>
							<div class="label">
								<span class="required">*</span> 确认密码：
							</div>
							<div class="r-txt">
								<input placeholder="再次输入您的登录密码" class="inptxt w200 color333"
									name="confirmPassword" id="confirmPassWord" type="password"
									maxlength="25" />
							</div>
							<div class="tips" style="color: #FF7F00;">请正确填写登录密码</div>
						</li>						
						<li id="li_usural_id_type">
							<div class="label">
								<span class="required">*</span> 证件号码：
							</div>
							<div class="r-txt">
								<div class="pos-rel">
									<input placeholder="请输入您的证件号码" type="text"
										name="cardCode" id="cardCode"
										class="inptxt w200" maxlength="18" value="" />
									<div class="inp-focus inp-focus-card" id="cardCode_div"
										style="display: none">
									</div>
								</div>
							</div>
							<div class="tips" style="color: #FF7F00;">（用于身份核验，请正确填写）</div></li>
						<li>
							<div class="label">
								<span id="email_div_span" class="required"
									style="display: none;">*</span> 性 别：
							</div>
							<div class="r-txt">
								<input  type="radio"  value="0"
									name="sex" class="inptxt w50 inp-transform" >男</input>
								<input  type="radio"  value="1"
									name="sex" class="inptxt w50 inp-transform" >女</input>
							</div>
							<div class="tips" style="color: #FF7F00;"></div>
						</li>
						<li>
							<div class="label">
								<span id="birthday_div_span" class="required">*</span>出生日期：
							</div>
							<div class="r-txt">
								<div class="pos-rel">
									<input type="text" placeholder="yyyy-MM-dd"
										name="birthday" class="inptxt w200"
										id="birthday" maxlength="30" value="" />
								</div>
							</div>
							<div class="tips" style="color: #FF7F00;">请正确填写出生日期</div>
						</li>
						<li>
							<div class="label">
								<span id="mobile_div_span" class="required">*</span> 手机号码：
							</div>
							<div class="r-txt">
								<div class="pos-rel">
									<input type="text" placeholder="请输入您的手机号码"
										name="tel" class="inptxt w200"
										id="tel" maxlength="30" value="" />
								</div>
							</div>
							<div class="tips" style="color: #FF7F00;">请正确填写手机号码</div>
						</li>
						<li>
							<div class="label">
								<span id="email_div_span" class="required"
									style="display: none;">*</span> 邮 箱：
							</div>
							<div class="r-txt">
								<input placeholder="请正确填写邮箱地址" type="text" id="email"
									name="email" class="inptxt w200"
									autocomplete="off" />
							</div>
							<div class="tips" style="color: #FF7F00;">请正确填写邮箱地址</div>
						</li>
						<li>
							<div class="label">
								<span id="mobile_div_span" class="required"
								style="display: none;">*</span>地  址：
							</div>
							<div class="r-txt">
								<div class="pos-rel">
									<input type="text" placeholder="请输入您所在地址"
										name="address" class="inptxt w200"
										id="address" maxlength="30"  />
								</div>
							</div>
							<div class="tips" style="color: #FF7F00;">请正确填写所在地址</div>
						</li>
						<li>
							<div class="label">
								<span id="mobile_div_span" class="required"
								style="display: none;">*</span>身份证上传：
							</div>
							<div class="r-txt">
								<div class="pos-rel">
									<input type="file"  name="cardPhoto" id="cardPhoto"  class="inptxt w200 color333" />
								</div>
							</div>
						</li>
					</ul>
					<div style="text-align: center;">
					<a id="xiazai"><img alt="" src="" width="150px;" height="150px;"></a>
					</div>
					<div class="lay-btn captchaButton " style="position: relative;"
						data-touclick-name="">
						<a id="nextBtn" href="javascript:void(0);" onclick="register();"
							class="btn122s" shape="rect">注册</a>
					</div>
				</div>
			</div>
		</form>
		<!--账户信息 结束-->
	</div>
	<!--页面主体  结束-->
	<!--页面底部  开始-->
	<div class="footer">
		<p>
			<a href="javascript:void(0);" >关于我们</a>
			|<a href="javascript:void(0);" >网站声明</a>
		</p>
		<p>版权所有 © 2008-2017 中国铁路信息技术中心 中国铁道科学研究院</p>
		<p>京ICP备15003716号-3&nbsp;&nbsp;|&nbsp;&nbsp;京ICP证150437号</p>
	</div>
	<!--页面底部  结束-->
	</body>
	</html>